<template>
  <div class="item-block upload-container">
    <div v-if="detail.status == 0">
      <div class="title">上传支付凭证（最多3张图）</div>
      <!-- <ul class="">
        <li style="margin-top:1px"></li>
      </ul> -->
      <div class="img-box save_upload_doc">
        <SmallUploadImg ref="smallUploadImg" :imageList="fileList" :maxLength="3" @changeImgList="changeImgList"></SmallUploadImg>
      </div>
    </div>
    <div v-else-if="detail.pay_image_list.length > 0" :key="1">
      <div class="title">支付凭证</div>
      <div class="img-box pay-imgs">
        <ul>
          <li class="li-img" v-for="(img, index) in detail.pay_image_list" :key="index">
            <img :src="img" class="upload_img"/>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { saveOrderVoucher } from '@/api/order/order.js'
import SmallUploadImg from '@/components/SmallUploadImg'

export default Vue.extend({
  components: {
    SmallUploadImg
  },
  props: {
    detailAll: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      fileList: [],
      formData: {},
      show: false
    }
  },
  computed: {
    detail() {
      return this.detailAll.detail
    }
  },
  created() {
    this.formData.order_id = this.detailAll.detail.order_id
    // console.log(this.fileList)
    const imgs = this.detailAll.detail.pay_image
    if (imgs && imgs.length > 0) {
      const imgArr = imgs.split(';')
      const imgArr2 = []
      for (var i = 0; i < imgArr.length; i++) {
        imgArr2.push(imgArr[i])
      }
      this.fileList = imgArr2
    }
  },
  methods: {
    /**
     * 上传图片
     */
    // uploadImg 抛出的图片参数
    changeImgList(val) {
      this.formData.image_list = val
      // console.log(this.formData.image_list, val, 'sdsdsdsds')
      saveOrderVoucher(this.formData).then(res => {
        if (res.status == 1) {
          this.$Error('操作成功')
        } else {
          this.$Error(res.msg)
        }
      })
    }
  }
})
</script>
<style lang="scss">
.upload-container{
  .van-uploader__preview{
    margin-top:20px;
    margin-right:24px;
    width:146px;
    height:146px;
    border-radius:2px;
    .van-uploader__preview-image,.van-uploader__file{
      width:146px;
      height:146px;
      border-radius:2px;      
    }
    .van-uploader__preview-delete{
      width:30px;
      height:30px;
      line-height: 30px;
      text-align: center;
      background-color: #F30C23;
      border-radius:50%;
      .van-uploader__preview-delete-icon{
        top: 0;
        right: 0;
        -webkit-transform: scale(.8);
        transform: scale(.8);
      }
      &:before{
        display:none;
      }
    }
  }
  .van-uploader__upload{
    margin-top:20px;
    width:146px;
    height:146px;
    border-radius:2px;
    background:url(https://img.wifenxiao.com/h5-wfx/images/order/upload_bg.png) no-repeat;
    background-size:100% 100%;
    i{
      display:none;
    }
  }
}
</style>
<style lang="scss">
@import 'src/styles/variables.scss';
@import 'src/styles/mixin';
.upload-container{
  .title{
    margin-bottom:20px;
  }
  .pay-imgs{
    ul{
      display:flex;
      flex-wrap:wrap;
      .li-img{
        overflow:hidden;
        width:160px;
        height:160px;
        margin: 0 16px 16px 0;
        img{
          display:block;
          width:100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
}
</style>